<template>
  <div class="index">
        <myheader></myheader>
        <div class="dashboard">
            <p @click="choose_color">颜色: 
                <button>白色</button>
                <button>金色</button>
                <button>红色</button>
                <button>蓝色</button>
            </p>
            <p>排序: 
                <button>默认</button>
                <button>销量</button>
                <button>价格</button>
            </p>
        </div>

        <div class="content">
            <div v-for="item in product_data" :key="item.id">
                <div class="card">
                   <button @click="todetail(item.id)"><img :src="item.image" alt="没有找到图片" width="100%"></button> 
                <div style="text-align: center;width:100%">
                    {{item.name}} <br/> {{item.brand}} <br/> {{item.color}}
                </div>
                </div>
            </div>
        </div>
  </div>
</template>

<script>
import {product} from '../../moke/product_data'
export default {
    name:'index',
    data(){
        return{
            product_data: product,
            color:'',
        }
    },
    methods: {
        todetail(id){
            this.$router.push(`/detail/${id}`)
        },
        choose_color(e){
            this.color = e.target.innerHTML
            e.target.className = 'current'
        }
    },
    computed:{
        check_data(){
            
        }
    },
    
}
</script>

<style scoped>
    .index {
        background-color: lightgray;
    }
    .dashboard {
        margin: 10px;
        padding: 20px;
        background-color: white;

    }

    .content {
        margin: 10px;
        padding: 2px;
        /* width :900px; */
        margin: 10 auto;
        /* display: flex;
        justify-content: center; */
    }
    .card {
        float: left;
        width: 200px;
        height: 300px;
        margin: 10px;
        padding: 10px;
        border: 1px solid black;
        background-color: white;
    }
    .current{
        background: rgb(5, 170, 231);
    }
    
</style>